<template>
  <div id="app">
    <div id="nav">
      <button @click="goBack()">返回</button>
      <button @click="toUser('tom')">tom去user</button>
      <button @click="toUser('jack')">jack去user</button>
    </div>
    <!-- 命名视图 router-view没有名字，默认为default-->
    <router-view></router-view>
    <router-view name="a"></router-view>
    <router-view name="b"></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    //【$router和$route的区别】
    //是2个完全不一样的对象
    //$route【只读】储存了当前路由的信息，例如path query params等
    //$router【只写】储存了整个项目的所有路由，以及控制路由的方法，跳转、返回等

    toUser(u) {
      //【编程式的路由导航】 history、 hash 和 abstract 表现一致
      //路由的push方法，向栈添加新记录，使用浏览器的后退可以返回上一个url
      this.$router.push({
        //url: /user/jack?id=123
        //路由 u是params（router.js中配置了user的path: /user/:user）
        // path: '/user/' + u, //字符串拼接风格
        path: `/user/${u}`, //占位符风格
        //query参数
        query: { id: 123 }
      });
      //replace方法，不添加新记录，直接替换当前记录，参数和push一样
    },
    goBack() {
      //go(n) n是一个number，代表路由 前进/后退 多少页，正数前进，负数后退
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="less" scoped></style>
